<template>
	<view>
		<u-back-top :scroll-top="scrollTop" top="500"></u-back-top>
		
		<view class="banner-list-box">
			<u-swiper
					:list="bannerList"
					key-name="image"
					
					indicator
					indicatorMode="line"
					circular
			></u-swiper>
		</view>
		
		<view class="notice-list-box">
			<u-notice-bar :text="noticeTitleList" direction="column" @click="clickNoticeBar"></u-notice-bar>
		</view>
		
		<u-sticky z-index="999" bgColor="#FFF">
			<u-tabs
				:list="menuList" keyName="title"
				lineWidth="30"
				lineColor="#f56c6c"
				:activeStyle="{
					color: '#303133',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				}"
				:inactiveStyle="{
					color: '#606266',
					transform: 'scale(1)'
				}"
				itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
			>
			</u-tabs>
		</u-sticky>
		
		<view class="post-list-box">
			<block v-for="post in postList" :key="post.id">
				<view class="post-item-box">
					<view class="title-box m-b-base" @click="navPost(post.id)">
						<view v-if="post.isTop" class="top">
							<u-tag text="置顶" type="error" size="mini"></u-tag>
						</view>
						<view class="category">
							<u-tag :text="post.category.title" size="mini"></u-tag>
						</view>
						<text class="title">{{post.title}}</text>
					</view>
					<view class="tag-list-box m-b-base">
						<view class="tag-item" v-for="tag in post.tags" :key="tag.id">
							<u-tag :text="tag.name" :type="tag.type" :size="tag.size" :shape="tag.shape" :plain="tag.plain" :plainFill="tag.plainFill"></u-tag>
						</view>
					</view>
					<view class="detail-box m-b-base">
						<u--text :text="post.detail"></u--text>
					</view>
					<view class="info-box m-b-base">
						<view class="info-left">
							<text>{{post.user.nickName + '发布于'}}</text>
							<text>{{post.publishTime | timeAgo}}</text>
						</view>
						<view class="info-right">
							<u-icon name="thumb-up" labelPos="right" :label="post.readCount"></u-icon>
							<u-icon name="star" labelPos="right" :label="post.collectCount"></u-icon>
						</view>
					</view>
					<view class="m-b-base">
						<u-divider></u-divider>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				
				bannerList: [
					{
						id: '1',
						image: 'https://static.wangsu123.cn/article/image/20220322/14a401b3a099e4f36dd733a2fa0bc0a9.png'
					},
					{
						id: '2',
						image: 'https://static.wangsu123.cn/article/image/20220322/14a401b3a099e4f36dd733a2fa0bc0a9.png'
					}
				],
				
				noticeList: [
					{
						id: '1',
						title: '通知xxxxxxx'
					},
					{
						id: '2',
						title: '通知xxxxxxx'
					}
				],
				noticeTitleList: ['通知xxxxxxx', '通知xxxxxxx2'],
				
				menuList: [
					{
						id: '1',
						type: 'not-plate',
						ref: 'latest',
						title: '最新发布'
					},
					{
						id: '2',
						type: 'plate',
						ref: '1',
						title: '招聘求职',
					},
					{
						id: '3',
						type: 'plate',
						ref: '2',
						title: '房屋'
					}
				],
				
				startId: 0,
				postList: [],
			}
		},
		onLoad() {
			if(this.menuList.length > 0) {
				let defaultMenu = this.menuList[0]
				this.getPostsByTypeAndRef(defaultMenu.type, defaultMenu.ref)
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		methods: {
			clickNoticeBar(index) {
				console.log('index id:', this.noticeList[index].id)
			},
			
			getPostsByTypeAndRef(type, ref) {
				console.log('get posts')
				let i=this.startId
				this.startId+=10
				let isTop = false
				for (;i<this.startId; i++) {
					let post = {
						id: i.toString(),
						title: '测试一下2222',
						category: {
							id: '1',
							title: '招聘',
						},
						tags: [
							{
								id: '1',
								name: '包吃',
								type: 'success',
								size: 30,
								shape: 'square',
								plain: true,
								plainFill: false
							},
							{
								id: '2',
								name: '包住',
								type: 'primary',
								size: 30,
								shape: 'square',
								plain: true,
								plainFill: false
							},
							{
								id: '3',
								name: '社保',
								type: 'primary',
								size: 30,
								shape: 'square',
								plain: true,
								plainFill: false
							}
						],
						detail: '一二三四五上山打老虎，两只老虎跑得快，一直没有眼睛，一直没有耳朵...',
						user: {
							nickName: '张三'
						},
						publishTime: '2023-10-12 15:17:10',
						readCount: 1001,
						collectCount: 10
					}
					if(i<=3) {
						post.isTop = true
					}
					this.postList.push(post)
				}
			},
			
			clickMenu(menu) {
				this.getPostsByTypeAndRef(menu.type, menu.ref)
			},
			navPost(postId) {
				uni.navigateTo({
					url: '/pages/post/postDetail?pid='+postId
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.notice-list-box {
		margin: $uni-spacing-col-base 0;
	}
	
	.post-list-box {
		margin: $uni-spacing-col-base $uni-spacing-row-base;
	}
	.m-b-base {
		// 8px
		margin-bottom: $uni-spacing-col-base;
	}
	
	.post-item-box {
		margin-bottom: $uni-spacing-col-xxl;
		
		.title-box {
			display: flex;
			flex-direction: row;
			.top, .category {
				margin-right: $uni-spacing-col-sm;
			}
			.title {
				font-size: $uni-font-size-xl;
			}
		}
		
		.tag-list-box {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
		}
		.tag-item:not(:first-child) {
			margin-left: 20rpx;
		}
		
		.info-box {
			display: flex;
			justify-content: space-between;
			.info-left {
				color: #909399;
			}
			.info-right {
				display: flex;
				justify-content: flex-end;
			}
		}
	}
</style>
